<template>
  
  <!-- 画布  -->
  <div class="canvas" id="canvas">
    <h1>Personal-Bpmn</h1>
    <div class="canvas-container" ref="bpmnCanvas">
      <div class="canvas-item"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref,onMounted } from 'vue';
  import BpmnModeler from 'bpmn-js/lib/Modeler'
  const bpmnCanvas = ref<HTMLDivElement>();

  const modeler = ref<BpmnModeler>()
  onMounted(() => {
    // 初始化画布
    try{
      modeler.value = new BpmnModeler({
        container: bpmnCanvas.value,
      })
    }
    catch(error){
      console.error(error);
    }
  });
</script>
<style scoped>
.canvas {
  width: 100%;
  background-color: #f0f0f0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.canvas-container {
  border: 1px solid #000;
  width: 100%;
  height: 700px;
  background-color: #f0f0f0;
}
</style>
